import styles from "./index.module.less";
import { sexColorOptions, sexIconOptions } from "../store";
import { modalConfig } from "./modal";
import { isDisplay } from "@userList/store";
import { fetchDataById, fetchSearchMap } from "@userList/utils";
import defaultAvatarUrl from "@/assets/img/default-avatar.png";
import { tableLoading } from "../table";
import IMToolTip from "@/components/common/ToolTip";
export default defineComponent({
  props: {
    record: {
      type: [Object],
      required: true,
    },
    spinning: {
      type: [Object, Boolean],
      required: false,
      default: () => tableLoading,
    },
    isDisplay: {
      type: [Object, Boolean],
      default: false,
    },
    is_enable_click: {
      type: [Object, Boolean],
      default: true,
    },
  },
  setup(props: any) {
    const { record, spinning } = props;
    const defineModal = modalConfig();
    const { title: modalTitle } = defineModal;
    const showModal = () => (defineModal.visible.value = true);
    const handleAvatarClick = async (uid: any) => {
      if (!(props.is_enable_click?.value ?? props.is_enable_click)) return;
      modalTitle.value = $t("base.userDetail");
      isDisplay.value = props.isDisplay;
      spinning.value = true;
      await fetchSearchMap();
      await fetchDataById({ uid });
      spinning.value = false;
      showModal();
    };
    return () => {
      return (
        <>
          {!isEmptyType(record?.value ?? record) ? (
            <div
              class={styles.custom_col}
              onClick={handleAvatarClick.bind(
                this,
                record?.value?.uid ?? record?.uid
              )}
            >
              <div class={styles.img_wrap}>
                <img
                  src={
                    record?.value?.avatar ?? record?.avatar ?? defaultAvatarUrl
                  }
                />
              </div>
              <div class={styles.other_wrap}>
                <span>
                  <i>
                    {record?.value?.nickname ?? record?.nickname?.length > 6 ? (
                      <im-tooltip
                        defaultValue={
                          <i>
                            {record?.value?.nickname ??
                              record?.nickname.slice(0, 6) + "..."}
                          </i>
                        }
                        title={
                          <i>{record?.value?.nickname ?? record?.nickname}</i>
                        }
                      />
                    ) : (
                      record?.value?.nickname ?? record?.nickname
                    )}
                  </i>
                  {renderIcon(
                    sexIconOptions[record?.value?.sex ?? record?.sex],
                    null,
                    `color: ${
                      sexColorOptions[record?.value?.sex ?? record?.sex]
                    }`
                  )}
                </span>
                <span>
                  <i style="white-space: nowrap;">{$t("table106") + "ID"}:</i>
                  <i>{record?.value?.uid ?? record?.uid}</i>
                </span>
              </div>
            </div>
          ) : null}
          {defineModal.visible.value ? <s-modal {...defineModal} /> : null}
        </>
      );
    };
  },
});
